<script lang="ts" setup>
import { computed } from 'vue'
import { useCourse } from '@/composables/useCourse'
import type { ListItem } from '@/types/components-tool'
import type { ExperimentModel } from '@/apis/course'
import { useRouter } from 'vue-router'
import { useClassID } from '@/composables/useClassID'
import { RouterName } from '@/router/name'

const props = defineProps<{ courseID: number }>()
const { course, isLoading } = useCourse(computed(() => props.courseID))

const router = useRouter()
const classID = useClassID()
const gotoClassReports = (experiment?: ExperimentModel) => {
  router.push({
    name: RouterName.ClassReports,
    params: { classID: classID.value, courseID: props.courseID },
    query: { experiment: experiment?.id }
  })
}
</script>

<template>
  <div class="card px-0 pb-0">
    <h3 class="card-title px-xs w-full">
      <i class="i-fluent-diversity-48-filled text-lg" />课程信息
      <a-link @click="gotoClassReports()" :hoverable="false" class="ml-auto mr-6">
        <i class="i-fluent-checkmark-circle-48-filled text-lg mb-1px opacity-90" />
        报告批阅
      </a-link>
    </h3>
    <a-list :bordered="false" :data="course?.experiments" size="small" :loading="isLoading">
      <template #header>
        <h4 class="my-0 text-arco-2 text-sm">
          {{ course?.course.name }}
          <span class="text-arco-3 font-normal text-sm">
            ( {{ course?.course.id }}* {{ course?.course.description }} )
          </span>
        </h4>
      </template>
      <template #item="{ item }: ListItem<ExperimentModel>">
        <div
          @click="gotoClassReports(item)"
          class="px-lg py-2 border-b-solid border-b-1 border-arco-2 last:border-b-none cursor-pointer hover:bg-arco-gray-1"
        >
          <h4 class="my-0 text-arco-2">
            <a-typography-text code>ID: {{ item.id }}</a-typography-text>
            {{ item.name }}
          </h4>
          <p class="mb-0 mt-1 text-arco-3">{{ item.description }}</p>
        </div>
      </template>
    </a-list>
  </div>
</template>
